<template>
    <div ref="element" class="content-info">
        <el-row :gutter="12">
            <el-col :span="6">
                <el-card shadow="hover" class="head">
                    <div style="position: absolute;padding: 30px">
                        <div style="font-size: 20px">全厂总能耗</div>
                        <div style="color: #099D7C;padding-top: 10px;font-size: 20px"> 2483546.00 kWh</div>
                    </div>
                    <img src="../../../assets/img/all.png"
                         style="width: 80px;height: 80px;padding-top: 20px;padding-left: 250px">
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="head">
                    <div style="position: absolute;padding: 30px">
                        <div style="font-size: 20px">当日用电</div>
                        <div style="color: #099D7C;padding-top: 10px;font-size: 20px"> 2483546.00 kWh</div>
                    </div>
                    <img src="../../../assets/img/today.png"
                         style="width: 80px;height: 80px;padding-top: 20px;padding-left: 250px">
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="head">
                    <div style="position: absolute;padding: 30px">
                        <div style="font-size: 20px">昨日用电</div>
                        <div style="color: #099D7C;padding-top: 10px;font-size: 20px"> 2483546.00 kWh</div>
                    </div>
                    <img src="../../../assets/img/yestorday.png"
                         style="width: 80px;height: 80px;padding-top: 20px;padding-left: 250px">
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" class="head">
                    <div style="position: absolute;padding-left: 20px;padding-top: 10px">
                        <div style="font-size: 20px">环比</div>
                        <div style="color: #099D7C;padding-top: 10px;font-size: 20px">248.00kWh</div>
                        <hr>
                        <div style="color: #099D7C;font-size: 20px">35%</div>
                    </div>
                    <img src="../../../assets/img/huan.png"
                         style="width: 80px;height: 80px;padding-top: 20px;padding-left: 250px">
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="12">
            <el-col :span="24">
                <el-card shadow="hover">
                    <div slot="header">
                        <span>筛选</span>
                    </div>
                    类型筛选:
                    <el-dropdown>
                          <span class="el-dropdown-link">
                            自动时间<i class="el-icon-arrow-down el-icon--right"></i>
                          </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>黄金糕</el-dropdown-item>
                            <el-dropdown-item>狮子头</el-dropdown-item>
                            <el-dropdown-item>螺蛳粉</el-dropdown-item>
                            <el-dropdown-item disabled>双皮奶</el-dropdown-item>
                            <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <span class="block" style="padding-left: 10px">
                      <el-date-picker
                              v-model="value2"
                              type="daterange"
                              align="right"
                              unlink-panels
                              range-separator="至"
                              start-placeholder="开始日期"
                              end-placeholder="结束日期"
                              :picker-options="pickerOptions">
    </el-date-picker>
                   </span>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="12">
            <el-col :span="12">
                <el-card shadow="hover" class="head2">
                    <div slot="header">
                        <span>生产能耗</span>
                        <span class="btn-fullscreen" @click="handleFullScreen" style="float: right">
                            <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                                <i class="el-icon-rank" style="padding-right: 10px;"/>
                            </el-tooltip>
                            <el-button type="success" size="mini">导出</el-button>
                        </span>
                    </div>
                    <el-table
                            :data="tableData_p"
                            height="250"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="产品线名称"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="plan"
                                label="日计划生产粒数"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="yesterday_size"
                                label="昨日生产粒数">
                        </el-table-column>
                        <el-table-column
                                prop="yesterday_use"
                                label="昨日用电量">
                        </el-table-column>
                        <el-table-column
                                prop="today_use"
                                label="当日用电量">
                        </el-table-column>
                        <el-table-column
                                prop="user_size"
                                label="单位电能生产粒度(粒/度)"
                                width="180">
                        </el-table-column>
                    </el-table>


                </el-card>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" class="head2">
                    <div slot="header">
                        <span>车间能耗</span>
                        <span class="btn-fullscreen" @click="handleFullScreen" style="float: right">
                            <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                                <i class="el-icon-rank" style="padding-right: 10px;"/>
                            </el-tooltip>
                            <el-button type="success" size="mini">导出</el-button>
                        </span>
                    </div>
                    <div id="room" style="width:800px;height:250px;"></div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="12">
            <el-col :span="12">
                <div class="btn-fullscreen" @click="handleFullScreen"
                     style="position: absolute; z-index: 99; left:750px;top: 5px">
                    <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                        <i class="el-icon-rank" style="padding-right: 10px;"/>
                    </el-tooltip>
                    <el-button type="success" size="mini">导出</el-button>
                </div>
                <el-tabs type="border-card">

                    <el-tab-pane label="电能耗">
                        <div id="energy_consumption" style="width:800px;height:250px;"></div>
                    </el-tab-pane>
                    <el-tab-pane label="能耗趋势">
                        <div id="trend" style="width:800px;height:250px;"></div>
                    </el-tab-pane>

                </el-tabs>
            </el-col>
            <el-col :span="12">
                <el-card shadow="hover" class="head2">
                    <div slot="header">
                        <span>重要设备能耗</span>
                        <span class="btn-fullscreen" @click="handleFullScreen" style="float: right">
                            <el-tooltip effect="dark" :content="fullscreen?`取消全屏`:`全屏`" placement="bottom">
                                <i class="el-icon-rank" style="padding-right: 10px;"/>
                            </el-tooltip>
                            <el-button type="success" size="mini">导出</el-button>
                        </span>
                    </div>
                    <el-table
                            :data="tableData_d"
                            height="250"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="device_id"
                                label="设备编号"
                                width="100"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="important_device"
                                label="重要设备"
                        >
                        </el-table-column>
                        <el-table-column
                                prop="area"
                                label="所属区域">
                        </el-table-column>
                        <el-table-column
                                prop="today_use"
                                label="当日用电量(kWh)">
                        </el-table-column>
                        <el-table-column
                                prop="month_contrast"
                                label="上月同比(kWh)">
                        </el-table-column>
                        <el-table-column
                                prop="month_contrast_h"
                                label="上月环比(kWh)">
                        </el-table-column>
                    </el-table>

                </el-card>
            </el-col>
        </el-row>

    </div>


</template>

<script>


    export default {
        data() {
            return {
                pickerOptions: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: '',
                tableData_p: [{
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }, {
                    plan: '2400',
                    name: '生产线1',
                    yesterday_size: '2500',
                    yesterday_use: '1300',
                    today_use: '1111',
                    user_size: '14.16'
                }],
                tableData_d: [{
                    device_id: '1',
                    important_device: '重要设备a',
                    area: 'A栋-车间1-生产线1',
                    today_use: '125.25',
                    month_contrast: '25.25',
                    month_contrast_h: '25.35'
                }, {
                    device_id: '1',
                    important_device: '重要设备a',
                    area: 'A栋-车间1-生产线1',
                    today_use: '125.25',
                    month_contrast: '25.25',
                    month_contrast_h: '25.35'
                }, {
                    device_id: '1',
                    important_device: '重要设备a',
                    area: 'A栋-车间1-生产线1',
                    today_use: '125.25',
                    month_contrast: '25.25',
                    month_contrast_h: '25.35'
                }, {
                    device_id: '1',
                    important_device: '重要设备a',
                    area: 'A栋-车间1-生产线1',
                    today_use: '125.25',
                    month_contrast: '25.25',
                    month_contrast_h: '25.35'
                }, {
                    device_id: '1',
                    important_device: '重要设备a',
                    area: 'A栋-车间1-生产线1',
                    today_use: '125.25',
                    month_contrast: '25.25',
                    month_contrast_h: '25.35'
                }, {
                    device_id: '1',
                    important_device: '重要设备a',
                    area: 'A栋-车间1-生产线1',
                    today_use: '125.25',
                    month_contrast: '25.25',
                    month_contrast_h: '25.35'
                }, {
                    device_id: '1',
                    important_device: '重要设备a',
                    area: 'A栋-车间1-生产线1',
                    today_use: '125.25',
                    month_contrast: '25.25',
                    month_contrast_h: '25.35'
                }]
            };
        }, methods: {


        }, mounted() {
            // 基于准备好的dom，初始化echarts实例
            const myChart = this.$echarts.init(document.getElementById('room'),'wonderland');
            // 指定图表的配置项和数据
            let option = option = {
                title: {
                    subtext: '单位:kWh'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: [
                    {
                        type: 'category',
                        data: ['车间1', '车间2', '车间3', '车间4', '车间5', '车间6']
                    }
                ],
                series: [
                    {
                        itemStyle: {
                            normal: {
                                //每根柱子颜色设置
                                color: function (params) {
                                    let colorList = [
                                        "#c23531",
                                        "#2f4554",
                                        "#61a0a8",
                                        "#d48265",
                                        "#91c7ae",
                                        "#749f83",
                                        "#ca8622",
                                        "#bda29a",
                                        "#6e7074",
                                        "#546570",
                                        "#c4ccd3",
                                        "#4BABDE",
                                        "#FFDE76",
                                        "#E43C59",
                                        "#37A2DA"
                                    ];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        type: 'bar',
                        data: [18203, 23489, 29034, 104970, 131744, 630230]
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);


            //点能耗
            // 基于准备好的dom，初始化echarts实例
            const myChart1 = this.$echarts.init(document.getElementById('energy_consumption'),'wonderland');
            // 指定图表的配置项和数据
            let option1 = option = {
                    title: {
                        subtext: ''
                    },
                    legend: {
                        left: 'right',
                        data: ['今日', '昨日', '告警值', '警戒值']
                    },
                    grid: {
                        left: '3%',
                        right: '3%',
                        bottom: '5%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
                    },
                    yAxis: [
                        {
                            name: '容量:(kWh)',
                            type: 'value'
                        },
                        {
                            name: '负载:(%)',
                            type: 'category',
                            data: [0, 16, 33, 30, 49, 65, 81, 100]
                        }
                    ],
                    series: [
                        {
                            name: '今日',
                            data: [10, 20, 50, 60, 70, 80, 90, 100, 120, 130, 150, 250, 300],
                            type: 'line',
                            smooth: true,
                            markLine: {
                                symbol: "none",
                                data: [
                                    {
                                        name: '告警值',
                                        lineStyle: {
                                            //警戒线的样式  ，虚实  颜色 dotted  solid
                                            type: "dotted",
                                            color: "#d2aa13",
                                        },
                                        yAxis: 120
                                    },
                                    {
                                        name: '警戒值',
                                        lineStyle: {
                                            //警戒线的样式  ，虚实  颜色 dotted  solid
                                            type: "dotted",
                                            color: "#d41111",
                                        },
                                        yAxis: 290
                                    },
                                ]
                            },

                        },
                        {
                            name: '昨日',
                            data: [20, 30, 50, 60, 90, 100, 120, 180, 230, 240, 150, 80, 60],
                            type: 'line',
                            smooth: true,
                        }
                    ]

                }
            ;
            // 使用刚指定的配置项和数据显示图表。
            myChart1.setOption(option1);

            //能耗趋势
            // 基于准备好的dom，初始化echarts实例
            const myChart2 = this.$echarts.init(document.getElementById('trend'));
            // 指定图表的配置项和数据
            let option2 = option = {
                title: {
                    subtext: ''
                },
                legend: {
                    left: 'right',
                    data: ['今日', '昨日', '告警值', '警戒值']
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['00:00', '02:00', '04:00', '06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
                },
                yAxis: [
                    {
                        name: '容量:(kWh)',
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '今日',
                        data: [10, 20, 50, 60, 70, 80, 90, 100, 120, 130, 150, 250, 300],
                        type: 'line',
                        smooth: true,
                    },
                    {
                        name: '昨日',
                        data: [20, 30, 50, 60, 90, 100, 120, 180, 230, 240, 150, 80, 60],
                        type: 'line',
                        smooth: true
                    }
                ]

            };
            // 使用刚指定的配置项和数据显示图表。
            myChart2.setOption(option2);

        }
    };


</script>

<style>

    .el-card.is-always-shadow, .el-card__body {
    }

    .el-row {
        margin: 10px;
        vertical-align: center;
    }

    .head {
        height: 120px;
        position: relative;
        background-color: #F6FBFF;
    }

    .head2 {
        height: 320px;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }

    .el-icon-arrow-down {
        font-size: 12px;
    }

    .el-table .cell {
        text-align: center;
    }

    .el-card__header {
        padding: 5px 10px;
    }

    .el-card__body {
        padding: 5px 10px;
    }

    /*导出样式*/
    .el-button--success:focus, .el-button--success:hover {
        background: #36B047;
        border-color: #36B047;
        color: #FFF;
    }


</style>
